<template>
  <div class="d-inline-block">
    <a-button
      style="margin-left: 10px"
      :type="type"
      :disabled="data.length === 0 && hasButton"
      @click="visible__ = !visible__"
    >
      {{ text }}
      <span v-if="data.length">{{ '(' + data.length + ')' }}</span>
    </a-button>
    <a-modal
      v-model="visible__"
      :closable="false"
      :width="width"
      :footer="null"
      @open="open"
      @cancel="cancel"
    >
      <section class="reversal">
        <div :class="submitInfo.finished ? 'face-turn' : ''" class="face">
          <div>{{ warningMsg }}</div>

          <div class="p">
            <p v-for="item in submitData" :key="item">
              {{ item }}
            </p>
          </div>
        </div>
        <div :class="submitInfo.finished ? 'back-turn' : ''" class="back">
          <successInfo :info="responseInfo" />
        </div>
      </section>
      <template v-slot:title>
        <div>
          <a-icon class="c-yellow" type="exclamation-circle" />
          {{ title || text }}
        </div>
      </template>
      <div class="text-right mt12">
        <a-button @click="cancel">
          {{ submitInfo.finished ? '关闭' : '取消' }}
        </a-button>
        <a-popconfirm
          v-if="!submitInfo.finished"
          title="确定提交?"
          ok-text="确定"
          cancel-text="取消"
          @confirm="submit"
        >
          <a-button
            v-if="!submitInfo.finished"
            style="margin-left: 10px"
            type="primary"
          >
            确定
          </a-button>
        </a-popconfirm>
      </div>
    </a-modal>
  </div>
</template>
<script>
import successInfo from '@/components/batchUpdate/successInfo'
export default {
  name: 'BatchUpdate',
  components: { successInfo },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    hasButton: {
      type: Boolean,
      default: true
    },
    text: {
      type: String,
      default: '批量操作'
    },
    width: {
      type: String,
      default: '500px'
    },
    warningMsg: {
      type: String,
      default: '确定完结以下采购单？'
    },
    type: {
      type: String,
      default: 'default'
    },
    title: {
      type: String,
      default: ''
    },
    url: {
      //  请求URL
      type: String,
      default: ''
    },
    dataName: {
      // key名称
      type: String,
      default: 'stringList'
    },
    params: {
      //  接口携带过去的其他参数
      type: Object,
      default: () => {
        return {}
      }
    },
    singleData: {
      type: Array,
      default: () => []
    },
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      submitData: [],
      visible__: false,
      responseInfo: {},
      submitInfo: { finished: false }
    }
  },
  watch: {
    value(n) {
      this.visible__ = n
    }
  },

  methods: {
    async submit() {
      const self = this
      if (!this.submitData.every(Boolean) || this.submitData.length === 0) {
        this.$message.error('存在脏数据，不能提交')
        return
      }
      const res = await this.$api.plan.fetchList(
        this.url,
        { ...this.params, [this.dataName]: this.submitData },
        { loading: true }
      )
      console.log('res', res)
      console.log(this.submitData)
      this.submitInfo.finished = true
      // this.submitInfo.finished && this.$emit('updateTable',this.submitData)
      if (res === 'true') {
        self.$message.success('success')
        this.$emit('updateTable', this.submitData)
      } else {
        this.responseInfo = res
        this.$emit('updateTable')
      }
    },
    open() {
      this.submitInfo.finished = false
      this.responseInfo = {}
      this.submitData = this.value ? this.singleData : this.data
    },
    cancel() {
      this.$emit('input', false)
      this.visible__ = false
    }
  }
}
</script>
<style scoped>
.reversal {
  width: 100%;
  height: 55vh;
  overflow: auto;
  text-align: center;
  position: relative;
}
.face,
.back {
  background: #ede9e9;
  width: 100%;
  height: 55vh;
  padding: 10px;
  overflow: auto;
  text-align: left;
  position: absolute;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: transform 2s;
}
.face {
  transform: rotateY(0deg);
}
.back {
  transform: rotateY(-180deg);
}
.back-turn {
  transform: rotateY(0deg);
}
.face-turn {
  transform: rotateY(180deg);
}

.c-yellow {
  color: #ffc53d;
  font-size: 22px;
}
.p {
  font-size: 18px;
}
.mt12 {
  margin-top: 12px;
}
/deep/ p {
  margin-bottom: 6px;
}
</style>
